<template>
  <div class="out">
    <zHeader pageTitle="公共设施"></zHeader>
    
    <div class="pageOut">
      <van-swipe class="imageBanner" :key="communityImageKey" indicator-color="white" lazy-render>
        <van-swipe-item v-if="gongGongSheShiData[cardSwipeIndex]" v-for="item in gongGongSheShiData[cardSwipeIndex].imageList" :index="item.imageId">
          <img class="image" :src="item.imageUrl" @click="imagePreviewHandler(item.imageUrl)" />
        </van-swipe-item>
      </van-swipe>

      <!-- 每5秒自动切换 -->
      <van-swipe :autoplay="5000" @change="bottomSwipeChangeHandler">
        <van-swipe-item v-for="item in gongGongSheShiData" :key="item.gongGongSheShiId">
          <section class="contentCard">
            <div class="title">{{ item.gongGongSheShiName }}</div>
            <div class="description">
              <div v-html="item.content"></div>
            </div>
            <div class="bottomIndicator"></div>
          </section>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import { pageConstant } from '@/config/contant.js'
import { postGongGongSheShiList } from '@/api/gonggongsheshi/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getSelectedXiaoQuId } from '@/config/config.js'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}

/**
 * 获取公共设施数据
 */
const gongGongSheShiData = ref([])
const loadGongGongSheShiDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postGongGongSheShiList({xiaoQuId: getSelectedXiaoQuId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      gongGongSheShiData.value = res.data.data
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadGongGongSheShiDataHandler()


const communityImageKey = ref(0)
const cardSwipeIndex = ref(0)
const bottomSwipeChangeHandler = (index) => {
  // 改变上面图片的内容
  cardSwipeIndex.value = index
  communityImageKey.value = communityImageKey.value + 1
}
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}
</script>

<style lang="scss" scoped>
.out {
  min-height: 100dvh;
  width: 100vw;
  background-color: rgb(241, 241, 241);

  .pageOut {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    
    .imageBanner {
      border-radius: 5px;
      width: 100%;
      height: 225px;

      .image {
        width: 100%;
        height: 225px;
      }
    }

    .contentCard {
      background-color: #fff;
      margin: 0;
      margin-top: 10px;
      height: 100%;
      box-sizing: border-box;
      border-radius: 5px;
      padding: 10px 16px;

      .title {
        width: 100%;
        min-height: 26px;
        font-weight: 500;
        font-size: 17px;
        line-height: 26px;
        text-align: center;
      }

      .description {
        margin-top: 14px;
        font-size: 16px;
        line-height: 25px;
        // line-height: 19px;
        text-align: left;
        white-space: pre-line;
      }

      .bottomIndicator {
        height: 20px;
      }
    }

    ::v-deep .van-swipe-item {
      height: auto;
    }

    .custom-indicator {
      color: #fff;
      background: rgba(0, 0, 0, .5);
      padding: 4px 5px 2px;
      font-size: 12px;
      position: absolute;
      bottom: 5px;
      right: 5px;
    }
  }
}
</style>